<!-- Giftina：https://giftia.moe -->
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <link rel="preload" href="style.css" as="style" />
    <link rel="preload" href="/socket.io/socket.io.js" as="script" />
    <link rel="preload" href="/superplaceholder.min.js" as="script" />
    <link rel="preload" href="/huaji.webp" as="image" />
    <link rel="preload" href="/xiaoye.webp" as="image" />
    <link rel="icon" href="/xiaoye.webp" />
    <meta name="theme-color" content="#ed90ba" />
    <meta http-equiv="X-UA-Compatible" messages="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta name="viewport" messages="minimal-ui" />
    <title>ChatDACS</title>
    <link rel="stylesheet" href="/style.css" type="text/css" />
    <script src="/socket.io/socket.io.js"></script>
    <script src="/echarts.min.js"></script>
    <script>
      window.onload = function () {
        var time_now = 0,
          time_last = 0,
          socket = io(),
          arrIcon = ["/huaji.webp", "/xiaoye.webp"], //arrIcon[0] = client icon, arrIcon[1] = server icon
          sorc = 1,
          liNow = -1,
          btn = document.getElementById("btn"),
          text = document.getElementById("text"),
          content = document.getElementsByTagName("ul")[0],
          img = content.getElementsByTagName("img"),
          span = content.getElementsByTagName("span"),
          typing_status = document.getElementById("typing_status"),
          version = document.getElementById("version"),
          onlineusers = document.getElementById("onlineusers"),
          cookiedata = "";

        socket.on("chat message", function (msg) {
          var CID = msg.cookiedata;
          CID = CID.replace("ChatdacsID=", "");
          CID = CID.replace("ChatdacsID = ", "");
          if (CID == "0") CID = "";
          var msg = msg.msg;
          time_now = new Date().getTime();
          if (time_now - time_last < 300000) {
            content.innerHTML += '<li><img src="' + arrIcon[sorc] + '"><span>' + msg + "</span></li>";
          } else {
            content.innerHTML +=
              '<div id="time">' +
              CurentTime() +
              '</div><li><img src="' +
              arrIcon[sorc] +
              '"><span>' +
              msg +
              "</span></li>";
            time_last = new Date().getTime();
          }
          liNow++;
          if (sorc === 0) {
            img[liNow].className += "imgright";
            span[liNow].className += "spanright";
            sorc = 1;
          } else {
            img[liNow].className += "imgleft";
            span[liNow].className += "spanleft";
          }
          window.scrollTo(0, document.body.scrollHeight);
        });

        socket.on("pic message", function (msg) {
          liNow++;
          content.innerHTML +=
            '<li><img src="' +
            arrIcon[1] +
            '"><span style="width: 77%; height: 1000px;"><div id="pic" style="background-image: url(' +
            msg +
            ');" ></div></span></li>';
          img[liNow].className += "imgleft";
          span[liNow].className += "spanleft";
          window.scrollTo(0, document.body.scrollHeight);
        });

        socket.on("chart message", function (msg) {
          content.innerHTML +=
            '<li><img src="' +
            arrIcon[1] +
            '"><span style="width: 77%"><div id="chart" style="width:100%; height: 500px;"></div></span></li>';
          var myChart = echarts.init(document.getElementById("chart"));
          var option = {
            title: {
              top: 30,
              left: "center",
              text: "2021数据统计",
            },
            tooltip: {},
            visualMap: {
              show: false,
              min: 0,
              max: 200,
              type: "piecewise",
              orient: "horizontal",
              left: "center",
              top: 65,
              textStyle: {
                color: "#000",
              },
            },
            calendar: {
              top: 120,
              left: 30,
              right: 30,
              cellSize: ["auto", "auto"],
              range: "2021",
              itemStyle: {
                borderWidth: 0.5,
              },
              yearLabel: { show: false },
            },
            series: {
              type: "heatmap",
              coordinateSystem: "calendar",
              data: msg,
            },
          };
          myChart.setOption(option);
          sorc = 0;
          liNow++;
          img[liNow].className += "imgleft";
          span[liNow].className += "spanleft";
          window.scrollTo(0, document.body.scrollHeight);
        });

        socket.on("system message", function (msg) {
          content.innerHTML += '<br><div id="sysmsg">' + msg + "</div><br>";
          window.scrollTo(0, document.body.scrollHeight);
        });

        socket.on("version", function (msg) {
          document.title = msg;
          version.innerHTML = msg;
        });

        socket.on("onlineusers", function (msg) {
          onlineusers.innerHTML = "当前在线用户数：" + msg;
        });

        socket.on("getcookie", function (msg) {
          cookiedata = document.cookie;
          if (cookiedata == null || cookiedata == "")
            cookiedata = document.cookie = "ChatdacsID = " + new Date().getTime();
          socket.emit("cookiecoming", cookiedata);
        });

        socket.on("reload", function () {
          window.location.reload();
        });

        socket.on("typing", function (msg) {
          if (text != "") typing_status.innerHTML = msg;
        });

        typing = function () {
          socket.emit("typing");
        };

        btn.onclick = function () {
          if (text.value === "") {
            var msg = text.placeholder;
            socket.emit("chat message", { cookiedata, msg });
            sorc = 0;
            window.scrollTo(0, document.body.scrollHeight);
            return false;
          } else {
            socket.emit("typing_over");
            var msg = text.value;
            socket.emit("chat message", { cookiedata, msg });
            text.value = "";
            sorc = 0;
            window.scrollTo(0, document.body.scrollHeight);
            return false;
          }
          text.focus();
        };
      };

      function CurentTime() {
        var now = new Date();
        //var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();
        var clock; // = year + '年';
        //if(month < 10)
        //	clock += '0';
        clock = month + "月";
        if (day < 10) clock += "0";
        clock += day + "日 ";
        if (hh < 10) clock += "0";
        clock += hh + ":";
        if (mm < 10) clock += "0";
        clock += mm + ":";
        if (ss < 10) clock += "0";
        clock += ss;
        return clock;
      }
    </script>
  </head>

  <body>
    <div class="header">
      <span id="version" style="float: left">ChatDACS</span>
      <span id="onlineusers" style="float: right; font-size: 70%"></span>
      <span style="float: right; font-size: 70%" id="typing_status"></span>
    </div>
    <ul class="content"></ul>
    <div class="footer">
      <form>
        <input
          id="text"
          placeholder="/帮助"
          autocomplete="on"
          value=""
          maxlength="110"
          style="font-size: 30px"
          autofocus
          oninput="typing()"
        />
        <button id="btn">发送</button>
      </form>
    </div>
    <script src="/superplaceholder.min.js"></script>
    <script>
      superplaceholder({
        el: document.querySelector("input"),
        sentences: [
          "/开门 233333",
          "/log_view",
          "/reload",
          "/rename 昵称",
          "BV1PA411L7op",
          "/随机cos",
          "/随机买家秀",
          "/随机冷知识",
          "小夜",
          "/帮助",
          "/随机二次元图",
        ],
        options: {
          letterDelay: 100,
          sentenceDelay: 3000,
          loop: true,
          shuffle: true,
          startOnFocus: false,
        },
      });
    </script>
  </body>
</html>
